<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item label="">
              <a-input-group compact>
                <a-select v-model="queryParam.searchField">
                  <a-select-option value="menberUserName"> 姓名 </a-select-option>
                  <a-select-option value="memberDeptName"> 部门 </a-select-option>
                </a-select>
                <a-input-search
                  style="width: 78%"
                  v-model="queryParam.keyword"
                  @search="searchQuery"
                  placeholder="请按照关键字进行搜索"
                />
              </a-input-group>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
<!--              <a-button-group>-->
<!--                <a-button :type="queryParam.timeFlag == '3' ? 'primary' : ''" @click="handleSearchTime(3)"-->
<!--                >全部</a-button-->
<!--                >-->
<!--              </a-button-group>-->
              <a-button type="primary" @click="showSearchForm = true" icon="search" style="margin-left: 30px"
              >高级查询</a-button>
              <a-button
                type="primary"
                @click="handlePostExportXls('人员成本明细表')"
                icon="download"
                style="margin-left: 10px"
              >导出</a-button
              >
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>

      <a-modal
        :visible="showSearchForm"
        width="70vw"
        :bodyStyle="{ padding: '10px' }"
        title="高级查询"
        @ok="handleToSearch"
        @cancel="showSearchForm = false"
      >
        <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row :gutter="24">

            <a-col :span="8">
              <a-form-model-item label="项目状态">
                <a-select
                  v-model="queryParam.status"
                  show-search
                  placeholder="请选择项目状态"
                  option-filter-prop="children"
                  style="width: 100%"
                >
                  <a-select-option v-for="(item,i) in statusList" :value="item.value" :key="item.value">
                    {{item.label}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="项目编号">
                <a-input v-model="queryParam.projectNo" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="承担部门">
                <a-input v-model="queryParam.memberDeptName" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">

            <a-col :span="8">
              <a-form-model-item label="项目名称">
                <a-input v-model="queryParam.projectName" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="项目经理">
                <a-input v-model="queryParam.projectManager" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator"></div>
    <div class="container">
      <a-table
        ref="table"
        bordered
        size="middle"
        :scroll="{ x: true }"
        :rowKey="
          (record, index) => {
            return index
          }
        "
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template slot="status" slot-scope="text, record">
          {{ initStatusText(record) }}
        </template>
        <template slot="projectNo" slot-scope="text, record">
          <span style="color: blue" @click="openProjectUrl(record)">{{ text }}</span>
        </template>
        <template slot="endDate" slot-scope="text">
          <span>{{ formatDate(text) }}</span>
        </template>
        <template slot="maxCompletionDate" slot-scope="text, record">
          <span v-if="!record.taskId">
            {{ formatDate(text) }}
          </span>
          <span v-if="record.taskId && record.status == '2' && record.hasSendNotice && record.hasSendNotice != '1'">{{
            formatDate(text)
          }}</span>
        </template>
      </a-table>
    </div>
  </a-card>
</template>


<script>
  import { JeecgListMixin } from '@/mixins/JeecgListSearchMixin'
  import moment from 'moment'
  export default {
    name: 'itAdjustmentList',
    mixins: [JeecgListMixin],
    components: {},
    data() {
      return {
        description: '信息迭代版本报表',
        /* 勾选导出参数 */
        rowKey: 'id',
        busType: 'itAdjustmentList',
        columns: [
          {
            title: '姓名',
            dataIndex: 'memberRealName',
            key: 'memberRealName',
            width: 90,
            align: 'center',
            scopedSlots: { customRender: 'memberRealName' },
          } ,
          {
            title: '账号',
            dataIndex: 'memberUserName',
            key: 'memberUserName',
            width: 90,
            align: 'center',
            scopedSlots: { customRender: 'memberUserName' },
          },
          {
            title: '部门',
            dataIndex: 'memberDeptName',
            key: 'memberDeptName',
            align: 'center',
            width: 90
          },
          {
            title: '项目状态',
            dataIndex: 'status',
            key: 'status',
            width: 90,
            align: 'center',
            scopedSlots: { customRender: 'status' },
          } ,
          {
            title: '项目编号',
            dataIndex: 'projectNo',
            key: 'projectNo',
            width: 90,
            align: 'center',
            scopedSlots: { customRender: 'projectNo' },
          },
          {
            title: '项目名称',
            dataIndex: 'projectName',
            key: 'projectName',
            align: 'center',
            width: 90
          },
          {
            title: '项目角色',
            dataIndex: 'memberRoleName',
            key: 'memberRoleName',
            align: 'center',
            width: 90
          },
          {
            title: '1月消耗（万）',
            dataIndex: 'january',
            key: 'january',
            align: 'center',
            width: 60,
          },
          {
            title: '1月负载率',
            dataIndex: 'january',
            key: 'januaryRate',
            align: 'center',
            width: 50,
          },
          {
            title: '2月消耗（万）',
            dataIndex: 'february',
            key: 'february',
            align: 'center',
            width: 60,
          },
          {
            title: '2月负载率',
            dataIndex: 'februaryRate',
            key: 'februaryRate',
            align: 'center',
            width: 50,
          },
          {
            title: '3月消耗（万）',
            dataIndex: 'march',
            key: 'march',
            align: 'center',
            width: 60,
          },
          {
            title: '3月负载率',
            dataIndex: 'marchRate',
            key: 'marchRate',
            align: 'center',
            width: 50,
          },

          {
            title: '4月消耗（万）',
            dataIndex: 'april',
            key: 'april',
            align: 'center',
            width: 60,
          },
          {
            title: '4月负载率',
            dataIndex: 'aprilRate',
            key: 'aprilRate',
            align: 'center',
            width: 50,
          },
          {
            title: '5月消耗（万）',
            dataIndex: 'may',
            key: 'may',
            align: 'center',
            width: 60,
          },
          {
            title: '5月负载率',
            dataIndex: 'mayRate',
            key: 'mayRate',
            align: 'center',
            width: 50,
          },
          {
            title: '6月消耗（万）',
            dataIndex: 'june',
            key: 'june',
            align: 'center',
            width: 60,
          },
          {
            title: '6月负载率',
            dataIndex: 'juneRate',
            key: 'juneRate',
            align: 'center',
            width: 50,
          },
          {
            title: '7月消耗（万）',
            dataIndex: 'july',
            key: 'july',
            align: 'center',
            width: 60,
          },
          {
            title: '7月负载率',
            dataIndex: 'julyRate',
            key: 'julyRate',
            align: 'center',
            width: 50,
          },

          {
            title: '8月消耗（万）',
            dataIndex: 'august',
            key: 'august',
            align: 'center',
            width: 60,
          },
          {
            title: '8月负载率',
            dataIndex: 'augustRate',
            key: 'augustRate',
            align: 'center',
            width: 50,
          },
          {
            title: '9月消耗（万）',
            dataIndex: 'september',
            key: 'september',
            align: 'center',
            width: 60,
          },
          {
            title: '9月负载率',
            dataIndex: 'septemberRate',
            key: 'septemberRate',
            align: 'center',
            width: 50,
          },
          {
            title: '10月消耗（万）',
            dataIndex: 'october',
            key: 'october',
            align: 'center',
            width: 60,
          },
          {
            title: '10月负载率',
            dataIndex: 'octoberRate',
            key: 'octoberRate',
            align: 'center',
            width: 50,
          },
          {
            title: '11月消耗（万）',
            dataIndex: 'november',
            key: 'november',
            align: 'center',
            width: 60,
          },
          {
            title: '11月负载率',
            dataIndex: 'novemberRate',
            key: 'novemberRate',
            align: 'center',
            width: 50,
          },
          {
            title: '12月消耗（万）',
            dataIndex: 'december',
            key: 'december',
            align: 'center',
            width: 60,
          },
          {
            title: '12月负载率',
            dataIndex: 'decemberRate',
            key: 'decemberRate',
            align: 'center',
            width: 50,
          },
        ],
        statusList:[
          {label:'创建中'  , value:'1'} ,
          {label:'待审批'  , value:'2'},
          {label:'待上会'  , value:'3'},
          {label:'执行中'  , value:'4'},
          {label:'待验收'  , value:'5'},
          {label:'结束'  , value:'6'},
          {label:'立项不成立'  , value:'7'},
        ],
        url: {
          list: '/projectBuildManday/getPersonCostDetail',
          exportXlsUrl: '/projectBuildManday/personDetailExport',
        },
        showSearchForm: false,
        keyword: '',
        labelCol: { span: 8 },
        wrapperCol: { span: 15 },
        queryParam: {
          searchField: 'menberUserName',
          timeFlag: '1',
          startOneTime: null,
          startTweTime: null,
          completeOneTime: null,
          completetTwoTime: null,
        },
        planStartDate:[],
        completeDate:[],
      }
    },
    mounted() {},
    computed: {},
    methods: {
      initStatusText(record) {

        if (record.status == '1') {
          return '创建中'
        }
        if (record.status == '2' )
        {
          return '待审批'
        }
        if (record.status == '3'){
          return '待上会'
        }
        if (record.status == '4'){
          return '执行中'
        }
        if (record.status == '5'){
          return '待验收'
        }
        if (record.status == '6'){
          return '结束'
        }
        if (record.status == '7'){
          return '立项不成立'
        }
      },
      formatDate(date) {
        return date ? moment(date).format('YYYY-MM-DD') : ''
      },
      openProjectUrl(record) {

        debugger
        console.log('项目id'  , record)
        let urlJump = this.$router.resolve({ path:`/approval?projectBuildId=` + record.id})
        window.open(urlJump.href, '_blank')
      },
      handleToSearch() {
        this.showSearchForm = false
        this.searchQuery()
      },
      searchReset() {
        this.queryParam = {}
        this.queryParam.searchField = '姓名'
        this.queryParam.timeFlag = '1'
        this.queryParam.startOneTime = null
        this.queryParam.startTweTime = null
        this.queryParam.completeOneTime = null
        this.queryParam.completetTwoTime = null
        this.planStartDate = undefined
        this.completeDate = undefined
        this.handleToSearch()
      },
      handleSearchTime(time) {
        if (this.tableLoading) {
          return
        }
        this.queryParam.timeFlag = time
        this.handleToSearch()
      },
      showLength(item, len) {
        if (!item || item.length <= len) {
          return item
        }
        return item.substring(0, len) + '...'
      },
      startChange(date ,dateString) {
        console.log(dateString)
        if (dateString && dateString.length > 0) {
          this.queryParam.startOneTime = dateString[0]
          this.queryParam.startTweTime = dateString[0]
        }
      },
      completeChange(date ,dateString) {
        console.log(dateString)
        if (dateString && dateString.length > 0) {
          this.queryParam.completeOneTime = dateString[0]
          this.queryParam.completetTwoTime = dateString[0]
        }
      }
    },
  }
</script>
<style lang="less" scoped>
  @import '~@assets/less/common.less';
  @import '~@assets/less/hte-main.less';
  /deep/ .ant-form-item-label{
    background: white;
  }
  @media (max-width: 1170px) {
    .page-main .container section .list-content > div.flex-num1-box {
      flex-wrap: wrap;
      > div {
        &:nth-child(1),
        &:nth-child(2) {
          width: 48%;
        }
        &:nth-child(3) {
          width: 100%;
          justify-content: flex-start;
          > span {
            margin-right: 20px;
            margin-left: 0;
          }
        }
      }
    }
    .page-main .container section .list-content > div.flex-num2-box {
      display: block;
      margin-top: 0;
    }
  }
</style>